<!doctype html>
<html dir="$i18n{textdirection}" lang="$i18n{language}">
<head>
  <meta charset="utf-8">
  <meta name="color-scheme" content="light dark">
  <meta name="theme-color" content="#fff">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,
                                 maximum-scale=1.0, user-scalable=no">
  <title>$i18n{title}</title>
  <link rel="stylesheet" href="../../../components/security_interstitials/core/common/resources/interstitial_core.css">
  <link rel="stylesheet" href="../../../components/security_interstitials/core/common/resources/interstitial_common.css">
  <link rel="stylesheet" href="neterror.css">
  <script src="neterror.js"></script>
  <script src="../../../components/security_interstitials/core/common/resources/interstitial_mobile_nav.js"></script>
  <script src="offline.js"></script>
  <script src="offline-sprite-definitions.js"></script>
  <if expr="is_ios">
    <script src="error_page_controller_ios.js"></script>
  </if>
</head>
<body id="t" class="neterror" style="font-family: $i18n{fontfamily}; font-size: $i18n{fontsize}">
  <div id="main-frame-error" class="interstitial-wrapper">
    <div id="main-content">
      <div class="icon"></div>
      <div id="main-message">
        <h1>
          <span jsselect="heading" jsvalues=".innerHTML:msg"></span>
          <a id="error-information-button" class="hidden" onclick="toggleErrorInformationPopup();"></a>
        </h1>
        <p jsselect="summary" jsvalues=".innerHTML:msg"></p>
        <!--The suggestion list and error code are normally presented inline,
          in which case error-information-popup-* divs have no effect. When
          error-information-popup-container has the use-popup-container class, this
          information is provided in a popup instead.-->
        <div id="error-information-popup-container">
          <div id="error-information-popup">
            <div id="error-information-popup-box">
              <div id="error-information-popup-content">
                <div id="suggestions-list" style="display:none"
                    jsdisplay="(suggestionsSummaryList && suggestionsSummaryList.length)">
                  <p jsvalues=".innerHTML:suggestionsSummaryListHeader"></p>
                  <ul jsvalues=".className:suggestionsSummaryList.length == 1 ? 'single-suggestion' : ''">
                    <li jsselect="suggestionsSummaryList" jsvalues=".innerHTML:summary"></li>
                  </ul>
                </div>
                <div class="error-code" jscontent="errorCode"></div>
                <p id="error-information-popup-close">
                  <a class="link-button" jscontent="closeDescriptionPopup" onclick="toggleErrorInformationPopup();"></a>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div id="download-links-wrapper" class="hidden">
          <div id="download-link-wrapper">
            <a id="download-link" class="link-button"
                onclick="downloadButtonClick()" jsselect="downloadButton"
                jscontent="msg" jsvalues=".disabledText:disabledMsg">
            </a>
          </div>
          <div id="download-link-clicked-wrapper" class="hidden">
            <div id="download-link-clicked" class="link-button"
                jsselect="downloadButton" jscontent="disabledMsg">
            </div>
          </div>
        </div>
        <div id="save-page-for-later-button" class="hidden">
          <a class="link-button" onclick="savePageLaterClick()"
            jsselect="savePageLater" jscontent="savePageMsg">
          </a>
        </div>
        <div id="cancel-save-page-button" class="hidden"
          onclick="cancelSavePageClick()" jsselect="savePageLater"
          jsvalues=".innerHTML:cancelMsg">
        </div>
        <div id="offline-content-list" class="list-hidden" hidden>
          <div id="offline-content-list-visibility-card"
              onclick="toggleOfflineContentListVisibility(true)">
            <div id="offline-content-list-title"
                jsselect="offlineContentList" jscontent="title">
            </div>
            <div>
              <div id="offline-content-list-show-text"
                  jsselect="offlineContentList" jscontent="showText">
              </div>
              <div id="offline-content-list-hide-text"
                  jsselect="offlineContentList" jscontent="hideText">
              </div>
            </div>
          </div>
          <div id="offline-content-suggestions"></div>
          <div id="offline-content-list-action">
            <a class="link-button" onclick="launchDownloadsPage()"
                jsselect="offlineContentList" jscontent="actionText">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div id="buttons" class="nav-wrapper">
      <div id="control-buttons" hidden>
        <button id="reload-button"
            class="blue-button text-button"
            onclick="reloadButtonClick(this.url);"
            jsselect="reloadButton"
            jsvalues=".url:reloadUrl"
            jscontent="msg"></button>
        <button id="download-button"
            class="blue-button text-button"
            onclick="downloadButtonClick()"
            jsselect="downloadButton"
            jscontent="msg" jsvalues=".disabledText:disabledMsg">
        </button>
      </div>
      <button id="details-button" class="secondary-button text-button small-link"
         onclick="detailsButtonClick(); toggleHelpBox()" jscontent="details"
         jsdisplay="(suggestionsDetails && suggestionsDetails.length > 0) || diagnose"
         jsvalues=".detailsText:details; .hideDetailsText:hideDetails;"></button>
    </div>
    <div id="details" class="hidden">
      <div class="suggestions" jsselect="suggestionsDetails">
        <div class="suggestion-header" jsvalues=".innerHTML:header"></div>
        <div class="suggestion-body" jsvalues=".innerHTML:body"></div>
      </div>
    </div>
  </div>
  <div id="sub-frame-error">
    <!-- Show details when hovering over the icon, in case the details are
         hidden because they're too large. -->
    <div class="icon"></div>
    <div id="sub-frame-error-details" jsselect="summary" jsvalues=".innerHTML:msg"></div>
  </div>

  <div id="offline-resources">
    <img id="offline-resources-1x" src="images/default_100_percent/offline/100-offline-sprite.png">
    <img id="offline-resources-2x" src="images/default_200_percent/offline/200-offline-sprite.png">
    <template id="audio-resources">
      <audio id="offline-sound-press" src="sounds/button-press.mp3"></audio>
      <audio id="offline-sound-hit" src="sounds/hit.mp3"></audio>
      <audio id="offline-sound-reached" src="sounds/score-reached.mp3"></audio>
    </template>
  </div>
</body>
</html>
